<template>
	<div class="test-success" v-loading.fullscreen.lock="showloading">
		<div style="background:white;padding:1.5rem;">
			<h1 class='header-h1'>
				{{userOrderInfo.fullName}}
				<span>
					{{orderStatus(userOrderInfo.orderStatus)}}
				</span>
			</h1>
			<el-row style='height:100px;padding-top:15px;border-bottom: 1px solid rgb(239,239,239);'>
				<el-col :span='8'>
					<img :src="userOrderInfo.infoImgJson" height="70" width="90" alt="">
				</el-col>
				<el-col :span='16' class='order-detaile-information'>
					<p style='height: 25px;'>
						<span>{{userOrderInfo.serviceName}}</span>
						<span v-if='hideMap' style='float: right;' @click.stop='goMap'>
							<img src="../../../static/img/add.png" height="20" width="20" alt="map">
						</span>
					</p>
					<p class='change-color'>
						￥{{userOrderInfo.realAmount}}
					</p>
					<p class='change-color'>
						{{date(userOrderInfo.createTime)}}
					</p>
				</el-col>
			</el-row>
			<el-row style='margin-top:1.5rem;' :gutter='10'>
	            <el-col :span='6' :offset='12'>
	              <el-button 
	                 v-if='offPay(userOrderInfo.orderStatus)'
	                 style='float:right;width:100%;height:25px;' 
	                 @click.stop="goPay(userOrderInfo.num)"  
	                 type="danger" 
	                 size="mini" 
	                 plain>
	                 去支付
	               </el-button>
	            </el-col>
	            <el-col :span="6" v-if='showClose(userOrderInfo.orderStatus)' style='float:right;'>
	              <el-button 
	                 style='float:right;width:100%;height:25px;' 
	                 @click.stop="afterOrdEv(userOrderInfo.orderStatus,userOrderInfo.num)"  
	                 type="danger" 
	                 size="mini" 
	                 plain>
	                 {{afterOrdVal(userOrderInfo.orderStatus)}}
	               </el-button>
	            </el-col>
	         </el-row>
		</div>
		<div class='qr-service' v-if='qrOff(userOrderInfo.orderStatus)'>
			<div>
				<img :src="userOrderInfo.guid" alt="" width='200' height='200'>
			</div>
			<p>
				<span>服务码</span>
				<span>{{userOrderInfo.serviceCode}}</span>
			</p>
		</div>
		<button class="btn" @click="go">返回</button>
	</div>
</template>

<script>
    import { URL_USER_ORDREINFO,AJAX,URL_PAY,URL_CLOSEORDER,_layer,URL_ORDERSURE} from "@/comm.js";
	export default {
		data(){
			return ({
				userOrderInfo:{},
				vs:{},
				hideMap:true,
				showloading:false,
				orderGetSta:{
			       //1 3 5 可以取消订单  7 去评论  9 已取消 
			       '1':'待支付',
			       '3':'待确认',
			       '5':'待服务',
			       '7':'已完成',
			       '9':'已取消'
			     },
			     afterOrSta:{
			        '1':'去取消',
			        '3':'去取消',
			        '5':'完成服务',
			        '7':'去评论'
			      }
			});
		},
		created(){
			$('title').text('订单详情');
			let orderNum=this.$route.query.orderNum;
			this.getOrder(orderNum);
			//初始化地图
			if(this.is_weixin()){
				this.map();
			};
		},
		methods:{
			//拉订单列表数据
		    getOrder(num){
		      this.showloading=true;
		      let This=this;
		      let send={orderNum:num};
		      $.post(URL_USER_ORDREINFO,send,function(data){
		      	This.showloading=false;
		      	if(data.retult){
					if(data.data.lat){
						This.vs={
							latitude: data.data.lat,
				            longitude: data.data.lng,
				            name: data.data.fullName, 
				            address: data.data.address,
				            scale: 14,
				            fail:function(){
				            	_layer('地图功能调用失败');
				            }
						};
					}else{
						This.hideMap=false;
					}
					This.userOrderInfo=data.data;
		      	}else{
					_layer('订单详情获取失败');
				}
			  });
		    },
			//是否显示去支付按钮
		    offPay(status){
		      if(status=='1'){
		        return true;
		      }
		    },
		    //根据订单状态来返回 去取消/去评论/已取消
		    afterOrdVal(status){
		      return this.afterOrSta[status];
		    },
		    //根据这个来决定去取消按钮的宽度
		    showWidth(status){
		      return status=='1'?6:12;
		    },
		    //是否显示去取消按钮
		    showClose(val){
		      return val=='9'?false:true;
		    },
			go(){
				history.back();
			},
			date(timestamp){
				if(!timestamp){
					return ;
				}
				var date;
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				if(String(timestamp).length==10){
					date=new Date(Number(timestamp) * 1000);
				}
				if(String(timestamp).length==13){
					date=new Date(Number(timestamp));
				}
		        let Y = date.getFullYear() + '-';
		        let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
		        let D = date.getDate() + ' ';
		        let h = date.getHours() + ':';
		        let m = date.getMinutes() + ':';
		        let s = date.getSeconds();
		        return Y+M+D+h+m+s;
			},
			//根据订单状态来得到中文
		    orderStatus(status){
		      return this.orderGetSta[status];
		    },
		     //点击 去取消/去评论/已取消
		    afterOrdEv(status,orderNum){
		      console.log(status+'    '+orderNum)
		      switch(status){
		        case 1:
		        case 3:
		          //去取消订单
		          this.cancelOr(orderNum);
		          break ;
		        case 5:
		          //用户去确认完成服务
		          this.suerService(orderNum);
		          break ;
		        case 7:
		          //去评论
		          this.commentOr(orderNum);
		          break ;
		        case 9:
		          break ;
		      }
		    },
		    //取消订单
		    cancelOr(orderNum){
		      let This=this;
		      console.log('取消订单事件，，，，'+orderNum);
		      $.post(URL_CLOSEORDER,{
		        num:orderNum
		      },function(data){
		        console.log('取sdf消订单')
		        console.log(data);
		        if(data.retult){
		          _layer(data.message);
		          setTimeout(function(){
		            history.back();
		          },2000);
		        }else{
		          This.showloading=false;
		          _layer(data.message);
		        } 
		      });
		    },
		    //评论订单
		    commentOr(orderNum){
		      _layer('暂无功能哦，暗自期待吧');
		      console.log('评论订单事件，，，，'+orderNum);
		    },
		    qrOff(num){
		    	return num=='3'?true:false;
		    },
		    pay(json){
		      let This=this;
		      WeixinJSBridge.invoke('getBrandWCPayRequest', json.pay, function(res){  
		         if(res.err_msg == "get_brand_wcpay_request:ok" ) {
		            console.log('支付成功');
		            _layer("订单支付成功");
		            setTimeout(function(){
		                history.back();
		            },2000);
		         }    
		      });       
		    },
		    //用户确认完成服务
		    suerService(orderNum){
		        let send={
		           orderNum:orderNum
		         };
		         console.log('将进入到已完成状态');
		         $.post(URL_ORDERSURE,send,function(data){
		           console.log(data);
		           console.log(send);
		           if(data.retult){
		             _layer('恭喜你，订单已完成');
		             setTimeout(function(){
		                history.back();
		             },2000);
		           }else{
		             _layer('确认完成服务失败');            }
		         });
		    },
		    //去支付
		    goPay(num){
		      let This=this;
		      let send={
		        orderNum:num,
		      };
		      console.log('订单编号')
		      console.log(send)
		      $.post(URL_PAY,send,function(data){
		        console.log('支付返回');
		        console.log(data);
		        if(data.retult){
		          if (typeof WeixinJSBridge == "undefined"){
		             _layer('请用微信支付');
		          }else{
		             This.pay(data.data);
		          }
		        }else{
		          _layer('支付失败');
		        }
		      })
		    },
		    //判断是IOS还是安卓
		    is_weixin() {
		        var u = navigator.userAgent, app = navigator.appVersion;
		        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
		        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		        if (isAndroid) {
		           //这个是安卓操作系统
		           return true;
		        }
		        if (isIOS) {
		    　　　　//这个是ios操作系统
		           return false;
		        }
		    },
		     //调用地图
		    map(){
		        $.ajax({
		            type : "get",  //提交方式  
		            url : "/wx/jsapi",//路径  
		            data:{url:window.location.href},
		            success : function(result) {//返回数据根据结果进行相应的处理  
		                console.log('地图返回');
		                console.log(result);
		                if ( result.retult ) {  
		                       wx.config({
		                          appId:result.data.appId,
		                          nonceStr:result.data.nonceStr,
		                          signature:result.data.signature,
		                          timestamp:result.data.timestamp,
		                          jsApiList: [
		                              'openLocation',
		                              'getLocation'
		                          ]
		                        });
		                        //  setTimeout(function (){
		                        //    wx.openLocation(This.vs);
		                        // },1000);
		                } else {
		                	_layer('地图初始化失败');  
		                }  
		            }  
		        });  
		    },
		    goMap(){
		    	wx.openLocation(this.vs);
		    }
		}
	}
</script>

<style scoped>
    h1,p,button{
		margin: 0;
		padding:0;
		border: none;
	}
	.test-success{
		position: absolute;
		top:0;
		bottom: 0;
		left: 0;
		right:0;
		background: #f7f7f7;
	}
	.header-h1{
		padding-bottom: 1rem;
		border-bottom: 1px solid rgb(239,239,239);
		font-family: 'Microsoft JhengHei';
		font-weight: 600;
		font-size:16px;
	}
	.header-h1 > span {
		display: inline-block;
	    width: 50px;
	    height: 20px;
	    float: right;
	    font-size:13px;
	    line-height: 20px;
	    text-align: center;
	    background: #ecf5ff;
	    color: #429dff;
	}
	.order-detaile-information p{
		height:23px;
		line-height: 23px;

	}
	.order-detaile-information .change-color{
		color: #999999ad;
        font-size: 13px;
	}
	.qr-service{
		margin-top:10px;
		height:240px;
		background: white;
	}
	.qr-service div{
		width: 200px;
		margin: auto;
	}
	.qr-service p{
		font-size: 15px;
		text-align: center;
		color: #409eff;
	}
	.btn{
		width: 92%;
		height:3.6rem;
		margin: 1.5rem 4%;
		background: #179ef0;
		color:white;
	}
</style>